<template>
  <view v-if="isAdmin" class="main-admin">
    <!-- edit form begin -->
    <view class="form-box shadow">


      <view class="form-group">
        <view class="title must">旧密码</view>
        <input maxlength="30" type="password"  placeholder="请填写旧密码" v-model="oldPassword" @blur="validation" />
      </view>
      
      <view class="form-group">
        <view class="title must">新密码</view>
        <input maxlength="30" type="password"  placeholder="请填写新密码" v-model="newPassword" />
      </view>
  
      <view class="form-group">
        <view class="title must">新密码再次填写</view>
        <input maxlength="30" type="password" placeholder="请填写新密码再次填写" v-model="againNewPassword" />
      </view>
  
    </view> 
  
    <button @click="bindFormSubmit" class="btn-admin">确定修改</button>
  
  </view>

</template>

<script setup>
import { ref } from 'vue';
import { 
  adminGetUserByPwd,
  adminUpdateAdminPwd
} from '@/request/api.js'
const isAdmin = ref(true); // 根据实际情况初始化
const oldPassword = ref('');
const newPassword = ref('');
const againNewPassword = ref('');


function bindFormSubmit() {
  adminGetUserByPwd({
    token:uni.getStorageSync('adminToken'),
    pwd:oldPassword.value
  }).then((res) => {
    console.log(res)
    if(res.data.code!==200){
      uni.showToast({
        title: '旧密码有误',
        icon: 'none'
      });
    }else{
      if(newPassword.value!=againNewPassword.value){
        uni.showToast({
          title: '两次新密码不一致',
          icon: 'none'
        });
      }else{
        adminUpdateAdminPwd({
          token:uni.getStorageSync('adminToken'),
          pwd:newPassword.value
        }).then((res) => {
          console.log(res)
          if(res.data.code==200){
            uni.showToast({
              title: '密码修改成功',
              icon: 'none'
            });
            newPassword.value='';
            againNewPassword.value='';
            oldPassword.value='';
          }else{
            uni.showToast({
              title: "密码修改失败",
              icon: 'none'
            });
          }
        })
      }
    }
  });
  // 可以在这里添加验证逻辑
}
function validation(){
  adminGetUserByPwd({
    token:uni.getStorageSync('adminToken'),
    pwd:oldPassword.value
  }).then((res) => {
    console.log(res)
    if(res.data.code!==200){
      uni.showToast({
        title: '旧密码有误',
        icon: 'none'
      });
    }
  });
}

</script>

<style scoped>
.main-admin {
  padding: 20px;
  background-color: #f9f9f9;
}


.form-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.must::after {
  content: '*';
  color: red;
  margin-left: 5px;
}

input {
  /* width: 100%; */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.hint-desc {
  font-size: 12px;
  color: red;
  margin-top: 5px;
}

.error {
  color: red;
}

.btn-admin {
  background-color: #007aff;
    color: white;
    /* padding: 10px 20px; */
    border-radius: 30px;
    /* font-size: 8px; */
    cursor: pointer;
    transition: background-color 0.3s;
    width: 277px;
    text-align: center;
    box-sizing: border-box;
    /* display: inline-block; */
    margin-top: 23px;
}

.btn-admin:hover {
  background-color: #0056b3;
}
</style>